<template>
	<view class="wrap">
		<view class="search">
			<u-search placeholder="请输入标题" v-model="query.title" height="80" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true" style="width: 100%; height: 87%; margin-top: 5rpx;margin-bottom: 5rpx;" @scrolltolower="loadMore">
			<view>
				<view v-for="(item, index) in list" :show="item.show" :key="item.id" :index="index"
					 class="uni-list" style="margin-top: 10rpx;margin-bottom: 10rpx;" @click="navTo('userSign?signinId='+item.signinId)">
					<view >
						<u-row style="margin: 20rpx;">
							<u-col span="9" class="ellipsisContent" style="font-weight: bold;">
								{{item.signTitle}}
							</u-col>
							<u-col span="3" style="text-align: right;">
								<u-tag type="warning" shape="circle" text="未签到" v-if="item.status===0"></u-tag>
								<u-tag type="success" shape="circle" text="已签到" v-else></u-tag>
								<!-- <view v-if="item.dataType==='GROUP'">群签到</view>
								<view v-else>会议签到</view> -->
							</u-col>
						</u-row>
						<u-row style="margin: 20rpx;color: gray;" v-if="item.status===1">
							<u-col span="12">
								签到时间：{{item.signTime}}
							</u-col>
						</u-row>
						<u-row style="margin: 20rpx;color: gray;">
							<u-col span="9">
								时间范围：</br>
								{{item.startTime}}</br>
								~ </br>
								{{item.endTime}}</br>
							</u-col>
							<u-col span="3" style="text-align: right;color: gray;" >
								<u-button shape="circle" size="mini" type="primary" @click="handleSignin(item)" v-if="item.status===0">
									点击签到
								</u-button>
							</u-col>
						</u-row>

					</view>
				</view>
			</view>
			<view class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				query: {
					current: 1,
					size: 20,
					summary: ''
				},
				list: [],
				count: 0,
				loadStatus: 'loadmore',
				arrow: false,
			}
		},
		onLoad() {
			this.loadList();
		},
		onShow() {
			
		},
		created() {
			
		},
		onReady() {
			
		},
		computed: {
			
		},
		methods: {
			loadList() {
				let vm = this;
				this.$u.api.wechat.wechatSigninUser.list(this.query).then(res => {
					if (!res.data || !res.data.records || res.data.records == 0) {
						vm.loadStatus = "nomore";
						return;
					}
					vm.list = vm.list.concat(res.data.records);
					vm.count = res.total;
					vm.query.current = res.data.current;
					vm.query.size = res.data.size;
					vm.loadStatus = "loadmore";
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			search() {
				this.list = [];
				this.query.current = 1;
				this.loadList();
			},
			handleSignin(row){
				this.$u.api.wechat.wechatSigninUser.save({
					id: row.id
				}).then(res => {
					if (res.success) {
						uni.showToast({title:"签到成功!",duration:1000})
						this.search();
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '../../../common/uni.css';
	
	page {
		background-color: #f5f5f5;
	}
	
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top) - var(--window-bottom)); // 视高 - 内容区顶部 - 内容区底部
		width: 100%;
	}
	
	.search{
		height:55px;
		background-color: #ffffff;
		background-size: 450px;
	}
	
	.fontStyle{
		font-weight: bold;
	}
	
	.ellipsisContent {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.textBlock {
		padding: 3rpx;
		border-width: 1px;
		border-style: solid;
	}
	
	.go-to-my-schedule {
		position: absolute;
		left: 0;
		top: 106rpx;
		z-index: 100;
		padding: 8rpx 12rpx 8rpx 22rpx;
		background-color: rgba(255, 184, 0, 1);
		border-radius: 0 22rpx 22rpx 0;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #FFF;
	}
</style>